<script setup lang="ts">
const props = defineProps({
    category: {
        type: String,
        required: true
    },
    count: {
        type: Number,
        required: true
    },
    reason: {
        type: String,
        required: true
    },
    visible: {
        type: Boolean,
        required: true
    },
})

const emits = defineEmits(['update:visible'])
const visible_2 = ref(props.visible)

watch(() => props.visible, (newVal) => {
    visible_2.value = newVal
    form.category = props.category
    form.count = props.count
    form.reason = props.reason
})

watch(() => visible_2.value, (newVal) => {
    emits('update:visible', newVal)
})

const form = reactive({
    category: props.category,
    address: '',
    reason: props.reason,
    count: 0
})
</script>

<template>
    <el-dialog v-model="visible_2">
        <el-form v-model="form">
            <el-form-item label="安放位置">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="理由">
                <el-input v-model="form.reason"></el-input>
            </el-form-item>
            <el-form-item label="审批结果">
                <el-row>
                    <el-row :span="6" :offset="2">
                        <el-button round type="success">通过</el-button>
                    </el-row>
                    <el-row :span="6" :offset="14">
                        <el-button round type="info">驳回</el-button>
                    </el-row>
                </el-row>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>